<template>
  <div class="mobile appBox">
    <div v-wechat-title="$route.meta.title"></div>
    <div class="flexCenter" :class="$store.state.isMobile?'ismobileHeader':'pcHeader'">
      <div class="flexCenter" :class="$store.state.isMobile?'ismobileTitle':'pcHeaderTitle'">
        <div class="hometitleTab flexStart titleHeight">
          <div v-if=" tabs.length">
            <span
              v-for="(tab, index) in tabs"
              :class="{ cur: iscur == index }"
              :key="index"
              class="Tabs flexColumn"
              @click="(iscur = index), tabChange(tab)"
            >
              <span class="tabName">{{tab.name}}</span>
              <span class="displayBar flexCenter" v-if="iscur == index"></span>
            </span>
          </div>
        </div>
        <div class="titleTab cascader flexEnd titleHeight">
          <div class="flexBetween" @click="dataClick">
            <span class="dataPlacehoder">{{dateDefault}}</span>
            <i class="el-icon-arrow-down fontColor999"></i>
          </div>
        </div>
      </div>
    </div>
    <section>
      <mt-datetime-picker
        ref="pickerData"
        type="date"
        v-model="pickerVisible"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :start-date="startDate"
        :end-date="endDate"
        @confirm="changeDateTime"
      ></mt-datetime-picker>
      <div class="flexCenter tabBusiness">
        <div class="flexCenter ZzTab">
          <p
            class="flexCenter"
            v-for="(item,index) in  ZzTabs"
            @click="(isZZ = index), ZztabChange(item)"
            :class="{ ZzTabBag: isZZ == index }"
            :key="index"
          >{{ item.name }}</p>
        </div>
      </div>
      <div class="sectionContent">
        <div class="titleDomBox">
          <div class="titleDom">月度单据总览</div>
          <p class="titleDom1">数据均为平均值</p>
        </div>
        <div class="sectionTopBox flexColumn" style="align-content: space-between;">
          <div class="flexConent business1" v-if="isZZ==0">
            <p class="flexCenter">
              <span class="bgColororange1"></span>
              <i>业务审核</i>
            </p>
            <p class="flexCenter">
              <span class="bgColororange2"></span>
              <i>单据准备</i>
            </p>
            <p class="flexCenter">
              <span class="bgColororange3"></span>
              <i>共享处理</i>
            </p>
            <p class="flexCenter">
              <i>单位:天</i>
            </p>
          </div>

          <Eatch
            :obj="obj"
            :org-code="orgCode"
            ref="headerChild"
            :role-type="roleType"
            v-if="isZZ==0"
          ></Eatch>
          <p style="height: 7rem;" class="flexColumnCenter" v-else>
            <img
              src="../assets/img/FZZ.png"
              alt
              style="width: 3rem;height: 3rem;margin-bottom: 0.2rem;"
            />
            <span style="font-size:0.3rem;color:#333">开发中,敬请期待</span>
          </p>
          <div class="detail" v-if="isZZ==0">
            <el-button type="primary" plain round @click="toDetail">查看详情</el-button>
          </div>
        </div>
        <div class="water-hliquid" v-if="isZZ==0">
          <div class="titleDomBox contrastSelect">
            <div class="titleDom">对比分析</div>
            <el-select v-model="potValue" placeholder="请选择" @change="changeHandle" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="sectionBottomBox flexBetween">
            <Hliquid
              :value="hliquid"
              :role-type="roleType"
              :org-code="orgCode"
              :detail-type="detailType"
            ></Hliquid>
            <div class="flexColumn" style="width: 60%;" :class="$store.state.isMobile?'':'mr-5'">
              <div
                class="flexBetween contrastTime"
                :style="$store.state.isMobile?'width: 80%':'width: 68%'"
              >
                <div class="flexColumnCenter">
                  <p>
                    <span class="numFontFamily">{{ indiviAvgDay|indiviAvgDay}}</span>天
                  </p>
                  <p>{{name}}时长</p>
                </div>
                <div class="flexColumnCenter">
                  <p>
                    <span class="numFontFamily">{{ avgtime | indiviAvgDay }}</span>天
                  </p>
                  <p v-if="roleType == 3 && detailType == 2">上月时长</p>
                  <p v-else>集团时长</p>
                </div>
              </div>
              <div class="moreDay flexConent">
                <div
                  v-if="potValue =='XSH'"
                  :style="$store.state.isMobile?'width: 80%':'width: 68%'"
                >
                  <p v-if="showXSHDBYDMoreDay && XSH_AMOUNT!=0">
                    单据准备时间超过3天
                    <br />下次要抓紧哦!
                  </p>
                  <p v-else-if="XSH_AMOUNT!=0 && showXSHYWSHMoreDay1">
                    单据准备时间低于3天
                    <br />继续保持哦！
                  </p>
                  <p v-else-if="XSH_AMOUNT!=0 && showXSHYWSHMoreDay">
                    业务审批时间超过5天
                    <br />下次要抓紧哦!
                  </p>
                  <p v-else-if="XSH_AMOUNT==0">{{'非信用付款' | getSelectName(name)}}</p>
                  <p v-else></p>
                </div>
                <div
                  v-if="potValue =='XYFK'"
                  :style="$store.state.isMobile?'width: 80%':'width: 68%'"
                >
                  <p v-if="XYFK_AMOUNT==0">{{ '信用付款' | getSelectName(name)}}</p>
                  <p v-else-if="XYFK_AMOUNT!=0 && showXYSHYWSHMoreDay">
                    业务审批时间低于3天
                    <br />继续保持哦！
                  </p>
                  <p v-else-if="XYFK_AMOUNT!=0 && !showXYSHYWSHMoreDay">
                    业务审批时间超过3天
                    <br />下次要抓紧哦!
                  </p>
                  <p v-else></p>
                </div>
                <div
                  v-if="potValue =='LJK'"
                  :style="$store.state.isMobile?'width: 80%':'width: 68%'"
                >
                  <P v-if="LJK_AMOUNT==0">{{ '领借款' | getSelectName(name)}}</P>
                  <p v-else-if="LJK_AMOUNT!=0 && showLJKYWSHMoreDay">
                    业务审批时间低于3天
                    <br />继续保持哦！
                  </p>
                  <p v-else-if="LJK_AMOUNT!=0 && !showLJKYWSHMoreDay">
                    业务审批时间超过3天
                    <br />下次要抓紧哦!
                  </p>
                  <p v-else></p>
                </div>
                <div class="homeBg"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flexEnd" style="margin-top:0.5rem">
        <!-- :href="'https://cc.longfor.com/im/text/8ab6809b6913ad260169142e719e00a2.html?skill=8ab680967251f2fb017279341b2f0121&forcePeopleSeat=0&project_id=15440683982682589%23%23%23%e5%8c%97%e4%ba%ac&bot_code=LXHCWDH&mobile=&from_client=appcw-zf&oa_account=' + userCode + '&name=' + userCode +'&token=' + detailName" -->
        <span class="flexColumnCenter" style="margin-right: 0.3rem;" @click="longhu()">
          <img
            src="../assets/img/longfor.png"
            style="width: 0.5rem;height: 0.5rem;margin-bottom: 0.2rem;"
          />
          <span style="font-size: 0.2rem;color: #fff;">龙小湖</span>
        </span>
        <!-- :href="'https://lx-xycq.longhu.net/#/?usercode='+userCode" -->
        <span class="flexColumnCenter" style="margin-right: 0.3rem;" @click="xinyong()">
          <img
            src="../assets/img/longfor1.png"
            style="width: 0.5rem;height: 0.5rem;margin-bottom: 0.2rem;"
          />
          <span style="font-size: 0.2rem;color: #fff;">我的信用分</span>
        </span>
      </div>
    </section>
  </div>
</template>
<script>
import Eatch from '../components/commons/home/paymentReport';
import Hliquid from '../components/commons/home/Hliquid';
import headerTab from '../components/commons/headerTab';

export default {
  name: 'home',
  components: { Hliquid, Eatch },
  data() {
    return {
      num: '30px',
      obj: {},
      tabs: [],
      potValue: 'XYFK',
      tabView: 'select1',
      iscur: 0,
      hliquid: 0,
      close: true,
      headerTitle: '知 付',
      endDate: new Date(),
      pickerVisible: new Date(),
      startDate: new Date(),
      time: '',
      ZzTabs: [
        { name: '转账', index: '0' },
        { name: '非转账', index: '1' }
      ],
      isZZ: 0,
      options: [
        {
          value: 'XYFK',
          label: '信用付款'
        },
        {
          value: 'XSH',
          label: '非信用付款'
        },
        {
          value: 'LJK',
          label: '领借款'
        }
      ],
      individuadata: null,
      deptdata: null,
      indiviAvgDay: 0,
      avgtime: 0,
      value: [],
      roleType: 0,
      orgCode: '',
      orgName: '',
      newcrr: [],
      fsrpamsg: [],
      dateDefault: '',
      name: '我的',
      linkName: ''
    };
  },
  created() {
    let year = new Date().getFullYear();
    let month1 = new Date().getMonth() + 1;
    let month = month1 >= 10 ? month1 : '0' + month1;
    this.startDate = new Date(Date.parse(year + '-' + month));
    this.endDate = new Date(Date.parse(year + '-' + month));
    this.pickerVisible = new Date(Date.parse(year + '-' + month));
    this.dateDefault = year + '/' + month;
    this.getReportDetail();
  },
  mounted() {},
  computed: {
    detailName() {
      return this.methodApi.getQueryVariable('token'); // 获取url的token
    },
    userCode() {
      return this.methodApi.getQueryVariable('usercode'); // 获取oa账号
    },
    // linkName() {
    //   return this.methodApi.getQueryVariable('name');
    // },
    showMoreDayindividuadata() {
      return this.obj && this.obj.individuadata;
    },
    showMoredeptdata() {
      return this.obj && this.obj.deptdata;
    },
    showavgtimedata() {
      return this.obj && this.obj.avgtimedata;
    },
    //非信用付款单据准备判断
    showXSHDBYDMoreDay() {
      if (this.orgCode == '集团') {
        return this.showavgtimedata && this.obj.avgtimedata.XSH_DBYD > 3;
      } else if (this.orgCode && this.orgCode != 0) {
        return (
          this.showMoredeptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].XSH_DBYD > 3
        );
      }
      if (!this.orgCode) {
        return (
          this.showMoreDayindividuadata && this.obj.individuadata.XSH_DBYD > 3
        );
      }
    },
    //非信用付款业务审核时间 单据准备时间<=3天且业务审批时间>5天判断
    showXSHYWSHMoreDay() {
      if (this.orgCode == '集团') {
        return (
          this.showavgtimedata &&
          this.obj.avgtimedata.XSH_DBYD <= 3 &&
          this.obj.avgtimedata.XSH_YWSH > 5
        );
      } else if (this.orgCode && this.orgCode != 0) {
        return (
          this.showMoredeptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].XSH_DBYD <= 3 &&
          this.obj.deptdata[this.orgCode].XSH_YWSH > 5
        );
      }
      if (!this.orgCode) {
        return (
          this.showMoreDayindividuadata &&
          this.obj.individuadata.XSH_DBYD <= 3 &&
          this.obj.individuadata.XSH_YWSH > 5
        );
      }
    },
    // 单据准备时间<=3天且业务审批时间<=5天
    showXSHYWSHMoreDay1() {
      if (this.orgCode == '集团') {
        return (
          this.showavgtimedata &&
          this.obj.avgtimedata.XSH_DBYD <= 3 &&
          this.obj.avgtimedata.XSH_YWSH <= 5
        );
      } else if (this.orgCode && this.orgCode != 0) {
        return (
          this.showMoredeptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].XSH_DBYD <= 3 &&
          this.obj.deptdata[this.orgCode].XSH_YWSH <= 5
        );
      }
      if (!this.orgCode) {
        return (
          this.showMoreDayindividuadata &&
          this.obj.individuadata.XSH_DBYD <= 3 &&
          this.obj.individuadata.XSH_YWSH <= 5
        );
      }
    },
    // 信用付款 超出时间判断
    showXYSHYWSHMoreDay() {
      if (this.orgCode == '集团') {
        return this.showavgtimedata && this.obj.avgtimedata.XYFK_YWSH <= 3;
      } else if (this.orgCode && this.orgCode != 0) {
        return (
          this.showMoredeptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].XYFK_YWSH <= 3
        );
      }
      if (!this.orgCode) {
        return (
          this.showMoreDayindividuadata && this.obj.individuadata.XYFK_YWSH <= 3
        );
      }
    },
    // 领借款 超出时间判断
    showLJKYWSHMoreDay() {
      if (this.orgCode == '集团') {
        return this.showavgtimedata && this.obj.avgtimedata.LJK_YWSH <= 3;
      } else if (this.orgCode && this.orgCode != 0) {
        return (
          this.showMoredeptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].LJK_YWSH <= 3
        );
      }
      if (!this.orgCode) {
        return (
          this.showMoreDayindividuadata && this.obj.individuadata.LJK_YWSH <= 3
        );
      }
    },
    detailType() {
      return !this.orgCode ? 1 : 2;
    },
    XSH_AMOUNT() {
      if (this.orgCode == '集团') {
        return this.showavgtimedata && this.obj.avgtimedata.XSH_AMOUNT != 0
          ? this.obj.avgtimedata.XSH_AMOUNT * 1
          : 0;
      } else if (this.orgCode && this.orgCode != 0) {
        return this.obj &&
          this.obj.deptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].XSH_AMOUNT != 0
          ? this.obj.deptdata[this.orgCode].XSH_AMOUNT * 1
          : 0;
      }
      if (!this.orgCode) {
        return this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.XSH_AMOUNT &&
          this.obj.individuadata.XSH_AMOUNT != 0
          ? this.obj.individuadata.XSH_AMOUNT * 1
          : 0;
      }
    },
    XYFK_AMOUNT() {
      if (this.orgCode == '集团') {
        return this.showavgtimedata && this.obj.avgtimedata.XYFK_AMOUNT != 0
          ? this.obj.avgtimedata.XYFK_AMOUNT * 1
          : 0;
      } else if (this.orgCode && this.orgCode != 0) {
        return this.obj &&
          this.obj.deptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].XYFK_AMOUNT != 0
          ? this.obj.deptdata[this.orgCode].XYFK_AMOUNT * 1
          : 0;
      }
      if (!this.orgCode) {
        return this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.XYFK_AMOUNT &&
          this.obj.individuadata.XYFK_AMOUNT != 0
          ? this.obj.individuadata.XYFK_AMOUNT * 1
          : 0;
      }
    },
    LJK_AMOUNT() {
      if (this.orgCode == '集团') {
        return this.showavgtimedata && this.obj.avgtimedata.LJK_AMOUNT != 0
          ? this.obj.avgtimedata.LJK_AMOUNT * 1
          : 0;
      } else if (this.orgCode && this.orgCode != 0) {
        return this.obj &&
          this.obj.deptdata &&
          this.obj.deptdata[this.orgCode] &&
          this.obj.deptdata[this.orgCode].LJK_AMOUNT != 0
          ? this.obj.deptdata[this.orgCode].LJK_AMOUNT * 1
          : 0;
      }
      if (!this.orgCode) {
        return this.obj &&
          this.obj.individuadata &&
          this.obj.individuadata.LJK_AMOUNT &&
          this.obj.individuadata.LJK_AMOUNT != 0
          ? this.obj.individuadata.LJK_AMOUNT * 1
          : 0;
      }
    }
  },
  filters: {
    indiviAvgDay(data) {
      return data ? data : 0;
    },
    getSelectName(name1, name) {
      let nameData = '';
      if (name == '我的') {
        nameData = '本月您没有' + name1 + '哦';
      } else if (name == '集团') {
        nameData = '本月' + name + '没有' + name1 + '哦';
      } else {
        nameData = '本月该' + name + '没有' + name1 + '哦';
      }
      return nameData;
    }
  },
  watch: {
    orgCode(newVal) {
      if (this.roleType == 0) {
        this.name = '我的';
      } else if (this.detailType == 1) {
        this.name = '我的';
      } else if (this.roleType == 1 && this.detailType == 2) {
        this.name = '部门';
      } else if (this.roleType == 2 && this.detailType == 2) {
        this.name = '地区';
      } else if (this.roleType == 3 && this.detailType == 2) {
        this.name = '本月';
      }
    },
    msg() {
      this.getDatePickData();
    }
  },
  methods: {
    longhu() {
      let url =
        'https://cc.longfor.com/im/text/8ab6809b6913ad260169142e719e00a2.html?skill=8ab680967251f2fb017279341b2f0121&forcePeopleSeat=0&project_id=15440683982682589%23%23%23%e5%8c%97%e4%ba%ac&bot_code=LXHCWDH&mobile=&from_client=appcw-zf&oa_account=' +
        this.userCode +
        '&name=' +
        this.linkName +
        '&token=' +
        this.detailName;
      if (this.$store.state.isMobile) {
        createIfm(
          'openNewTarget',
          'webType=1&htmlTitle=1&url=' + encodeURIComponent(url)
        );
      } else {
        window.open(url);
      }
    },
    xinyong() {
      let url = 'https://lx-xycq.longhu.net/#/?usercode=' + this.userCode;
      if (this.$store.state.isMobile) {
        createIfm(
          'openNewTarget',
          'webType=1&htmlTitle=1&url=' + encodeURIComponent(url)
        );
      } else {
        window.open(url);
      }
    },
    //tab切换 传组件、下标
    tabChange(tab) {
      this.orgName = tab.name;
      this.orgCode = tab.orgCode;
      this.roleType = tab.roleType;
      this.handleChange(this.value);
      this.changeHandle(this.potValue);
    },
    //转账非转账
    ZztabChange(tab) {
      this.isZZ = tab.index;
      this.handleChange(this.value);
      this.changeHandle(this.potValue);
    },
    // 点击日期组件选择时间框
    dataClick() {
      this.$refs.pickerData.open(); // 触发
    },
    changeDateTime(val) {
      let timestr = new Date(val);
      let getYear = timestr.getFullYear();
      let getMon =
        timestr.getMonth() + 1 >= 10
          ? timestr.getMonth() + 1
          : '0' + (timestr.getMonth() + 1);
      this.value = [getYear, getMon];
      this.dateDefault = getYear + '/' + getMon;
      this.handleChange(this.value);
      this.changeHandle(this.potValue);
    },
    handleConfirm(val) {
      this.time = val;
    },
    handleChange(value) {
      this.$axios
        .post(this.$api.personalIntef, {
          params: {
            access_token: this.methodApi.getQueryVariable('token'),
            userCode: this.methodApi.getQueryVariable('usercode'),
            yearv: value[0],
            orgCode: '',
            mon: value[1],
            roleType: this.roleType,
            isZZ: this.isZZ
          }
        })
        .then(response => {
          if (response.data.dataList.ErrorCode == '000001') {
            if (this.$store.state.isMobile) {
              this.methodApi.AlertNoToken();
            } else {
              this.methodApi.pcAlertNoToken();
            }
          }
          if (response.data.dataList) {
            this.linkName =
              response.data.dataList.iamMsg &&
              response.data.dataList.iamMsg.data
                ? response.data.dataList.iamMsg.data.realName
                : '';
            this.obj = response.data.dataList;
            this.individuadata = this.obj.individuadata;
            this.deptdata = this.obj.deptdata;
            this.tabs = [];
            if (this.obj.roleType && this.obj.roleType.orgName) {
              let list =
                this.obj.roleType.orgName.indexOf(',') > 0
                  ? this.obj.roleType.orgName.split(',')
                  : [this.obj.roleType.orgName];
              let orgCodeList =
                this.obj.roleType.orgCode.indexOf(',') > 0
                  ? this.obj.roleType.orgCode.split(',')
                  : [this.obj.roleType.orgCode];
              let roleTypeList =
                this.obj.roleType.roleType.indexOf(',') > 0
                  ? this.obj.roleType.roleType.split(',')
                  : [this.obj.roleType.roleType];
              var max = roleTypeList.reduce(function(a, b) {
                return b > a ? b : a;
              });
              this.tabs.push({ name: '我的', orgCode: 0, roleType: max });
              list.forEach((item, index) => {
                let obj = {};
                obj.name = item;
                obj.orgCode = orgCodeList[index];
                obj.roleType = roleTypeList[index];
                this.tabs.push(obj);
              });
            } else {
              // this.tabs.push({ name: '我的', orgCode: 0, roleType: 0 })
            }
            // 判断是部门还是个人的付款比例。
            this.changeHandle(this.potValue);
          }
        })
        .catch(function(error) {
          console.log(error, '接口错误');
        });
    },
    changeHandle(val) {
      if (!this.orgCode) {
        // 如果本人的话取本人的数据：
        var PERCENTA = this.individuadata,
          AVGTIME = this.obj.avgtimedata;
      }
      if (this.orgCode && this.orgCode != 0) {
        // 如果部门和地区的话取，部门/地区的数据；
        var PERCENTA = this.deptdata[this.orgCode],
          AVGTIME = this.obj.avgtimedata;
      }
      // 环形比例圆形数据。
      if (val == 'XSH') {
        if (this.orgCode == '集团') {
          this.hliquid = Number(
            AVGTIME && AVGTIME.XSH_PERCENTA ? AVGTIME.XSH_PERCENTA : 0
          );
          this.avgtime = PERCENTA ? PERCENTA.AVG_SJ_XSH : '';
          this.indiviAvgDay = AVGTIME ? AVGTIME.AVG_SJ_XSH : '';
        } else {
          this.hliquid = Number(
            PERCENTA && PERCENTA.XSH_PERCENTA ? PERCENTA.XSH_PERCENTA : 0
          );
          this.indiviAvgDay = PERCENTA ? PERCENTA.AVG_SJ_XSH : '';
          this.avgtime = AVGTIME ? AVGTIME.AVG_SJ_XSH : '';
        }
      } else if (val == 'XYFK') {
        if (this.orgCode == '集团') {
          this.hliquid = Number(
            AVGTIME && AVGTIME.XYFK_PERCENTA ? AVGTIME.XYFK_PERCENTA : 0
          );
          this.avgtime = PERCENTA ? PERCENTA.AVG_SJ_XYFK : '';
          this.indiviAvgDay = AVGTIME ? AVGTIME.AVG_SJ_XYFK : '';
        } else {
          this.hliquid = Number(
            PERCENTA && PERCENTA.XYFK_PERCENTA ? PERCENTA.XYFK_PERCENTA : 0
          );
          this.indiviAvgDay = PERCENTA ? PERCENTA.AVG_SJ_XYFK : '';
          this.avgtime = AVGTIME ? AVGTIME.AVG_SJ_XYFK : '';
        }
      } else {
        if (this.orgCode == '集团') {
          this.hliquid = Number(
            AVGTIME && AVGTIME.LJK_PERCENTA ? AVGTIME.LJK_PERCENTA : 0
          );
          this.avgtime = PERCENTA ? PERCENTA.AVG_SJ_LJK : '';
          this.indiviAvgDay = AVGTIME ? AVGTIME.AVG_SJ_LJK : '';
        } else {
          this.hliquid = Number(
            PERCENTA && PERCENTA.LJK_PERCENTA ? PERCENTA.LJK_PERCENTA : 0
          );
          this.indiviAvgDay = PERCENTA ? PERCENTA.AVG_SJ_LJK : '';
          this.avgtime = AVGTIME ? AVGTIME.AVG_SJ_LJK : '';
        }
      }
    },
    toDetail() {
      // 跳转详情页
      this.$router.push({
        path: '/MobileTab',
        query: {
          data: this.detailName,
          userCode: this.userCode,
          roleType: this.roleType,
          orgCode: this.orgCode,
          orgName: this.orgName,
          detailType: this.detailType,
          value: this.value,
          isZZ: this.isZZ
        }
      });
    },
    getDatePickData() {
      let list = [];
      this.msg.forEach(item => {
        let str = item.YEARV + '-' + item.MON;
        if (!(item.YEARV == 2019 && item.MON == 9)) {
          //2019的9月数据变更不展示。
          let str = item.YEARV + '-' + item.MON;
          list.push(str);
        }
      });
      this.endDate = new Date(Date.parse(list[list.length - 1]));
      this.startDate = new Date(Date.parse(list[0]));
      this.pickerVisible = new Date(Date.parse(list[list.length - 1]));
      this.dateDefault =
        this.msg[this.msg.length - 1].YEARV +
        '/' +
        this.msg[this.msg.length - 1].MON;
      this.value = [
        this.msg[this.msg.length - 1].YEARV,
        this.msg[this.msg.length - 1].MON
      ];
    },
    getReportDetail() {
      this.roleType = 0;
      this.$axios
        .get(this.$api.getDateIntef)
        .then(res => {
          this.msg = res.data.dateList;
          this.getDatePickData();
          this.$axios
            .post(this.$api.personalIntef, {
              params: {
                access_token: this.methodApi.getQueryVariable('token'),
                userCode: this.methodApi.getQueryVariable('usercode'),
                yearv: this.msg[this.msg.length - 1].YEARV,
                orgCode: '',
                mon: this.msg[this.msg.length - 1].MON,
                roleType: '0',
                isZZ: '0'
              }
            })
            .then(response => {
              if (response.data.dataList.ErrorCode == '000001') {
                if (this.$store.state.isMobile) {
                  this.methodApi.AlertNoToken();
                } else {
                  this.methodApi.pcAlertNoToken();
                }
              }
              if (response.data.dataList) {
                this.obj = response.data.dataList;
                this.tabs = [];
                this.linkName =
                  response.data.dataList.iamMsg &&
                  response.data.dataList.iamMsg.data
                    ? response.data.dataList.iamMsg.data.realName
                    : '';
                if (this.obj.roleType && this.obj.roleType.orgName) {
                  let list =
                    this.obj.roleType.orgName.indexOf(',') > 0
                      ? this.obj.roleType.orgName.split(',')
                      : [this.obj.roleType.orgName];
                  let orgCodeList =
                    this.obj.roleType.orgCode.indexOf(',') > 0
                      ? this.obj.roleType.orgCode.split(',')
                      : [this.obj.roleType.orgCode];
                  let roleTypeList =
                    this.obj.roleType.roleType.indexOf(',') > 0
                      ? this.obj.roleType.roleType.split(',')
                      : [this.obj.roleType.roleType];
                  var max = roleTypeList.reduce(function(a, b) {
                    return b > a ? b : a;
                  });
                  this.tabs.push({ name: '我的', orgCode: 0, roleType: max });
                  list.forEach((item, index) => {
                    let obj = {};
                    obj.name = item;
                    obj.orgCode = orgCodeList[index];
                    obj.roleType = roleTypeList[index];
                    this.tabs.push(obj);
                  });
                  this.roleType = this.tabs[0].roleType;
                } else {
                  // this.tabs.push({ name: '我的', orgCode: 0, roleType: 0 })
                }
                this.individuadata = this.obj.individuadata;
                this.deptdata = this.obj.deptdata;
                this.changeHandle(this.potValue);
              }
            })
            .catch(function(error) {
              console.log(error, '接口错误');
            });
        })
        .catch(function(error) {
          console.log('error init.' + error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
// @import '../assets/css/mintui.css';

.mr-5 {
  margin-right: 5%;
}

.mobile {
  .cur {
    position: absolute;
    left: 0;
    bottom: 0;
    font-weight: 700;
    color: #5587f0 !important;
  }

  >>> .picker-items {
    > div:nth-child(3) {
      display: none;
    }
  }

  >>> .picker-toolbar {
    height: 1rem;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    span {
      line-height: 1rem;
      padding: 0 0.4rem;
      font-size: 0.3rem;
      text-align: right;
    }

    span:first-child {
      text-align: left;
    }
  }

  .hometitleTab {
    width: 14rem;

    div {
      width: 12rem;
      height: 100%;
      display: flex;
      flex-flow: row;
      overflow: hidden;
      overflow-x: auto;
    }

    .Tabs {
      position: relative;
      display: flex;
      flex-flow: column;
      float: left;
      align-items: center;
      justify-content: space-between;
      max-width: 2.4rem;
      height: 100%;
      margin-right: 0.3rem;
      font-size: 0.3rem;
      color: #999;

      .tabName {
        max-width: 2.8rem;
        text-align: center;
        display: inline-block;
        height: 0.4rem;
        line-height: 0.4rem;
        margin-top: 0.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
        -webkit-box-orient: vertical;
      }
    }
  }

  .cascader {
    #seleter {
      line-height: 0.8rem;
      /* width: 42%; */
      max-width: 2.4rem;
      max-height: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: numFontFamily !important;
    }

    div {
      margin-left: 0.2rem;
      width: 1.8rem;
      height: 100%;

      i {
        font-size: 0.28rem;
      }
    }
  }

  >>> .el-input__prefix,
  >>> .el-input__suffix {
    color: #333 !important;
  }

  >>> .el-input--suffix {
    min-width: 1rem !important;
  }

  >>> .el-input__inner {
    background-color: #fff !important;
    color: #fff !important;
    font-size: 0.3rem;
    border: none;
    text-align: center;
    font-weight: bold;
  }

  /* 下来日期搜索框 */
  >>> .el-cascader-panel .el-cascader-menu__wrap {
    height: 4rem;
    font-size: 0.3rem;
    font-family: numFontFamily;
  }

  .dataPlacehoder {
    color: #333 !important;
    font-weight: 700;
    font-size: 0.34rem;
  }

  input::-webkit-input-placeholder {
    color: #333 !important;
    font-size: 0.32rem;
  }

  /* 改变文本框宽度 */
  #seleter >>> .el-input__inner {
    border: 0 !important;
    background-color: #f2f2f2 !important;
    min-width: 2.2rem !important;
    max-width: 3.4rem !important;
  }

  >>> .el-input--suffix .el-input__inner {
    padding-right: 0.4rem !important;
  }

  >>> .el-input__inner {
    padding: 0 0.4rem !important;
  }

  /*头部：业务审核、打包邮寄、共享处理*/
  .tabBusiness {
    margin-top: 0.18rem;
    margin-bottom: 0.16rem;

    p {
      font-size: 0.26rem;
      height: 0.64rem;
      width: 2.24rem;
      /* padding: 0.2rem 0.8rem; */
      border: 2px solid #2f80ed;
      color: #fff;
    }

    p:first-child {
      border-top-left-radius: 0.16rem;
      border-bottom-left-radius: 0.16rem;
      border-right: none;
    }

    p:last-child {
      border-top-right-radius: 0.16rem;
      border-bottom-right-radius: 0.16rem;
      border-left: none;
    }
  }

  .tabBusiness .ZzTab p.ZzTabBag {
    background-color: #2f80ed;
    color: #fff;
  }

  .pcbusiness {
    width: 80%;
    margin: 0 auto;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #a29d9f;

    p {
      width: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      margin: 0 10px;
    }

    span {
      display: inline-block;
      border-radius: 4px;
      margin-right: 10px;
      width: 20px;
      height: 20px;
    }
  }

  .amountSum {
    width: 100%;
    margin: 0 auto 0 auto;

    span {
      width: 0.76rem;
      height: 0.76rem;
      text-align: center;
      border-radius: 0.76rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #a6b2ce;
      border: 1px solid rgba(170, 181, 208, 0.2);
    }

    div {
      width: 28%;
      height: 0.76rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .compon {
    width: 100%;
    display: flex;
    flex: row;
    justify-content: center;
    align-items: center;
    justify-items: center;
  }

  .water-hliquid {
    /* border-top: 5px solid #f2f2f2;
    padding: 0.1rem 0.15rem 0; */
    box-sizing: border-box;
  }

  .detail {
    width: 100%;
    text-align: center;
    padding: 0.3rem 0;
    .el-button--primary.is-plain {
      width: 2.8rem;
      height: 0.8rem;
      border-radius: 2.4rem;
      font-size: 0.28rem;
    }
  }

  .sectionBottomBox {
    .contrastTime {
      /* padding: 0 0.2rem; */
      div {
        min-width: 1.4rem;
      }
    }

    p {
      padding-top: 0.22rem;
      color: #666;
      box-sizing: border-box;

      span {
        font-size: 0.34rem;
        font-weight: 700;
      }
    }
  }

  .sectionBottomBox .moreDay {
    position: relative;
    margin-top: 0.18rem;
    font-size: 0.24rem;
    line-height: 0.4rem;
    color: #999;
    min-height: 1.2rem;

    p {
      /* max-width: 3rem; */
      width: 100%;
      border-radius: 0.2rem;
      background-color: #dde7f3;
      padding: 0.2rem;
    }

    .homeBg {
      margin-left: -0.2rem;
    }
  }

  .contrastSelect .el-select >>> {
    min-width: 1.6rem;
    max-width: 2.4rem;

    /* width: 50%; */
    .el-input--mini .el-input__inner {
      border: none !important;
      color: #fff;
      font-size: 0.28rem;
      background-color: #263687 !important;
    }

    .el-input .el-select__caret {
      font-size: 0.28rem;
      color: #fff !important;
    }
  }
}
</style>